{% extends 'base.html' %}
{% load widget_tweaks %}


{% block html_title %}
    Review
{% endblock %}


{% block html_body_nav_ol %}

    <li class="breadcrumb-item"><a href="{% url 'home' %}">Home</a></li>
    <li class="breadcrumb-item"><a href="{% url 'review:index' %}">Review</a></li>
    <li class="breadcrumb-item"><a href="{% url 'review:list' %}">List</a></li>
    <li class="breadcrumb-item active" aria-current="page">Create</li>

{% endblock %}


{% block html_body %}

    <form id="id-form-review-public" enctype="multipart/form-data" method="post">{% csrf_token %}
        {{ formset.management_form }}
        {% if formset %}

            <ul class="nav nav-tabs" id="myTab" role="tablist">
                {% for form in formset %}
                    <li class="nav-item" role="presentation">
                        <a class="nav-link {% if forloop.counter == 1 %}active{% endif %}"
                           id="form-{{ form.id.value }}-tab" data-toggle="tab" href="#form-{{ form.id.value }}"
                           role="tab"
                           aria-controls="form-{{ form.id.value }}" aria-selected="true">
                            R{{ forloop.counter }}
                        </a>
                    </li>
                {% endfor %}
            </ul>

            <div class="tab-content" id="myTabContent">
                {% for form in formset %}
                    {{ form.id }}

                    {% if form.non_field_errors %}
                        <div class="alert alert-warning alert-dismissible fade show mt-2" role="alert">
                            <ul>
                                {% for error in form.non_field_errors %}
                                    <li>{{ error|escape }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}


                    <div class="tab-pane fade {% if forloop.counter == 1 %}show active{% endif %}"
                         id="form-{{ form.id.value }}" role="tabpanel"
                         aria-labelledby="form-{{ form.id.value }}-tab">


                        <div class="row mt-3">
                            <div class="col-auto">
                                {{ form.final_patch.errors }}
                                <div class="mb-2 font-weight-bold text-black-50">
                                    Current patch: <a
                                        href="{{ form.final_patch.value }}">{{ form.final_patch.value }}</a><br>
                                </div>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input name="form-{{ forloop.counter0 }}-final_patch" type="file"
                                               class="custom-file-input" id="{{ form.final_patch.id_for_label }}">
                                        <label class="custom-file-label" for="{{ form.final_patch.id_for_label }}">
                                            Change patch
                                        </label>
                                    </div>
                                </div>
                                <script>
                                    $('#{{ form.final_patch.id_for_label }}').on('change', function () {
                                        //get the file name
                                        var fileName = $(this).val();
                                        //replace the "Choose a file" label
                                        $(this).next('.custom-file-label').html(fileName);
                                    })
                                </script>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="container">
                                {{ form.review_summary.errors }}
                                <label for="{{ form.review_summary.id_for_label }}" class="font-weight-bold text-black-50">Summary</label>
                                {% render_field form.review_summary class+='form-control' %}
{#                                <input type="text" name="form-{{ forloop.counter0 }}-review_summary"#}
{#                                       id="id_form-{{ forloop.counter0 }}-review_summary"#}
{#                                       value="{{ form.review_summary.value }}"#}
{#                                       maxlength="200" class="form-control">#}
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-8">
                                <div class="mb-3">
                                    {{ form.review_description.errors }}
                                    <label for="{{ form.review_description.id_for_label }}">Description:</label>
                                    {% render_field form.review_description class+='form-control' rows='5' %}
{#                                    <label class="font-weight-bold text-black-50"#}
{#                                           for="id_form-{{ forloop.counter0 }}-review_description">Description:</label>#}
{#                                    <textarea class="form-control" name="form-{{ forloop.counter0 }}-review_description"#}
{#                                              id="id_form-{{ forloop.counter0 }}-review_description"#}
{#                                              maxlength="2000" rows="5">{{ form.review_description.value }}</textarea>#}
                                </div>


                                <div class="mb-3">
                                    {{ form.review_testing_done.errors }}
                                    <label class="font-weight-bold text-black-50"
                                           for="id_form-{{ forloop.counter0 }}-review_testing_done">
                                        Testing Done:
                                    </label>
                                    <textarea class="form-control"
                                              name="form-{{ forloop.counter0 }}-review_testing_done"
                                              id="id_form-{{ forloop.counter0 }}-review_testing_done"
                                              maxlength="2000" rows="4">{{ form.review_testing_done.value }}</textarea>
                                </div>

                            </div>
                            <div class="col-4">

                                <div class="mb-3">
                                    {{ form.review_branch.errors }}
                                    <label class="font-weight-bold text-black-50"
                                           for="id_form-{{ forloop.counter0 }}-review_branch">Branch:</label>
                                    <input type="text" name="form-{{ forloop.counter0 }}-review_branch"
                                           id="id_form-{{ forloop.counter0 }}-review_branch"
                                           value="{{ form.review_branch.value }}"
                                           maxlength="100" class="form-control">
                                </div>

                                <div class="mb-3">
                                    {{ form.review_branch.errors }}
                                    <label class="font-weight-bold text-black-50"
                                           for="{{ form.bugs.id_for_label }}">Bugs:</label>
                                    {% render_field form.bugs class+='form-control' %}
                                </div>

                                <div class="mb-3">
                                    {{ form.review_target_people.errors }}
                                    <label class="font-weight-bold text-black-50"
                                           for="id_form-{{ forloop.counter0 }}-review_target_people">People:</label>
                                    <input class="form-control" type="text"
                                           name="form-{{ forloop.counter0 }}-review_target_people"
                                           id="id_form-{{ forloop.counter0 }}-review_target_people"
                                           value="{{ form.review_target_people.value }}"
                                           maxlength="100">
                                </div>

                                <div class="mb-3">
                                    {{ form.review_target_groups.errors }}
                                    <label class="font-weight-bold text-black-50"
                                           for="id_form-{{ forloop.counter0 }}-review_target_groups">Groups:</label>
                                    <input class="form-control" type="text"
                                           name="form-{{ forloop.counter0 }}-review_target_groups"
                                           id="id_form-{{ forloop.counter0 }}-review_target_groups"
                                           value="{{ form.review_target_groups.value }}"
                                           maxlength="100">
                                </div>


                                <div class="row justify-content-end flex-nowrap mt-5">
                                    <div class="col-auto nowrap pr-1">
                                        <input class="btn btn-info " type="button" id="id-btn-public" value="Public">
                                    </div>
                                    <div class="col-auto nowrap pl-1">
                                        <input class="btn btn-secondary" type="button" id="id-btn-draft" value="Draft">
                                    </div>
                                </div>
                            </div>

                            {{ form.user.errors }}
                            {{ form.review_id.errors }}
                            {{ form.public.errors }}
                            <input type="hidden" name="form-{{ forloop.counter0 }}-user" value="{{ form.user.value }}"
                                   id="id_form-{{ forloop.counter0 }}-user">
                            <input type="hidden" name="form-{{ forloop.counter0 }}-review_id"
                                   value="{{ form.review_id.value }}" id="id_form-{{ forloop.counter0 }}-review_id">
                            <input type="hidden" name="form-{{ forloop.counter0 }}-public" value="True"
                                   id="id_form-{{ forloop.counter0 }}id-public">
                            <input type="hidden" name="form-{{ forloop.counter0 }}-need_public"
                                   class="class-hidden-need-public" id="id_form-{{ forloop.counter0 }}-need_public">
                        </div>


                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </form>

{% endblock %}


{% block javascript %}

    <script>
        $('#id-btn-public').on('click', function () {
            $('.class-hidden-need-public').val(1)
            $('#id-form-review-public').submit()
        })
        $('#id-btn-draft').on('click', function () {
            $('.class-hidden-need-public').val(0)
            $('#id-form-review-public').submit()
        })
    </script>

{% endblock %}
